<template>
	<view>
		<view class="">
			<u-notice-bar :text="scrollingNotifications" mode="closable"></u-notice-bar>
		</view>
		<view class="distribution-promotion">
			<view class="distribution-title">
				<image src="/static/logo.png" class="title-image" mode=""></image>
				<view class="title-font">
					<view class="">设备地道口</view>
					<view class="superior-distributors">
						<text>上级分销商: 无</text>
						<view class="fill-out">填写</view>
					</view>
				</view>
			</view>
			<view class="distribution-content">
				<view class="content-title">申请成为分销会员</view>
				<view class="border">
					<u--form labelPosition="left" labelWidth="80" :model="model1" ref="uForm">
						<u-form-item label="真实姓名" prop="model1.name" ref="item1">
							<u--input v-model="model1.name" placeholder="请输入您的真实姓名" border="none" clearable></u--input>
						</u-form-item>
					</u--form>
				</view>
				<view class="border">
					<u--form labelPosition="left" labelWidth="80" :model="model1" ref="uForm">
						<u-form-item label="手机号码" prop="model1.phone" ref="item1">
							<u--input v-model="model1.phone" placeholder="请输入您的手机号" border="none" clearable></u--input>
						</u-form-item>
					</u--form>
				</view>
				<view class="border">
					<u--form labelPosition="left" labelWidth="80" :model="model1" ref="uForm">
						<u-form-item label="性别" prop="model1.address" borderBottom>
							<u--input v-model="model1.address" disabled disabledColor="#ffffff" placeholder="请选择性别"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</u--form>
				</view>
				<view class="border">
					<u--form labelPosition="left" labelWidth="80" :model="model1" ref="uForm">
						<u-form-item label="申请原因" prop="model1.application" ref="item1">
							<u--input v-model="model1.application" placeholder="(必填)" border="none"
								clearable></u--input>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</view>
		<view class="submit">
			<button class="submit-button">立即申请</button>
			<view class="submit-font">提交成功后，我们将会在1-2个工作日内给您回复</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 滚动通知数据
				scrollingNotifications: '成为分销会员，推广下级可获得额外收益,推广越多收益越多',
				// 表单绑定数据
				model1: {
					name: '',
					phone: '',
					address: '',
					application: '',
				},
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.distribution-promotion {
		background-color: rgb(255, 49, 64);
		padding: 20rpx;
		height: 220rpx;
	}

	.distribution-title {
		display: flex;
		align-items: center;
	}

	.title-image {
		width: 125rpx;
		height: 125rpx;
		border-radius: 100%;
	}

	.title-font {
		color: #fff;
		margin-left: 20rpx;
	}

	.superior-distributors {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.fill-out {
		margin-left: 20rpx;
		background-color: rgb(255, 131, 141);
		padding: 5rpx 30rpx 5rpx 30rpx;
		border-radius: 40rpx;
	}

	.distribution-content {
		background-color: #fff;
		padding: 20rpx;
		text-align: center;
		margin-top: 40rpx;
		border-radius: 20rpx;
	}

	.content-title {
		font-weight: bold;
		font-size: 40rpx;
	}

	.border {
		height: 90rpx;
		border: 2rpx solid #ccc;
		padding: 10rpx;
		margin-top: 30rpx;
	}
	.submit{
		margin-top: 600rpx;
		padding: 0rpx 20rpx 0rpx 20rpx;
	}
	.submit-button{
		border-radius: 40rpx;
		background-color: rgb(255, 44, 60);
		color: #fff;
	}
	.submit-font{
		text-align: center;
		color: rgb(146, 146, 146);
		margin-top: 20rpx;
		font-size: 30rpx;
	}
</style>